<!--培训资料-分类-->
<template>
  <div class="addInformation">
    <div class="opNoticeTop">
      <div class="title">
        <div class="searchBox">
          <!-- <div>
            <select v-model="typeVal">
              <option v-for="(item,index) in typeLists" :key="index" :value="item.typeName">{{item.typeName}}</option>
            </select>
          </div>
          <div><input type="text" placeholder="输入标题" v-model="titleVal"></div>
          <div @click="searchClick">查询</div> -->
        </div>
        <!-- <div class="addClass" @click="addClick">新增分类</div> -->
      </div>
    </div>
    <ul class="opNoticeMain">
      <li class="firstLi">
        <div>序号</div>
        <div>类别</div>
        <div>修改时间</div>
        <div>显示</div>
        <div>排序</div>
        <div>操作</div>
      </li>
      <li class="dataLi" v-show="dataArr.length > 0" v-for="(item,index) in dataArr" :key="index">
        <div>{{index+1}}</div>
        <div>{{item.name | strFun}}</div>
        <div>{{item.updateTime | timeFun}}</div>
        <div>
          暂不支持
          <!-- @click="showClick(index)" -->
          <!-- <img v-show="item.whetherShow == 1" src="/static/img/blue.png" alt="">
          <img v-show="item.whetherShow == 0" src="/static/img/closeBlue.png" alt=""> -->
        </div>
        <div >
          暂不支持
          <!-- <img v-show="index != 0" @click="upClick(index)" src="/static/img/up.png" alt="">
          <img v-show="index == 0" @click="upMaxClick" src="/static/img/grayup.png" alt="">
          <img v-show="dataArr.length != index+1" @click="downClick(index)" src="/static/img/down.png" alt="">        
          <img v-show="dataArr.length == index+1" @click="downMaxClick" src="/static/img/graydown.png" alt=""> -->
        </div>
        <div class="operate">
          <img @click="ucompileClick(index)" src="/static/img/编辑.png" alt="">
          <img @click="deleteClick(index)" src="/static/img/删除.png" alt="">
        </div>
      </li>
       <li class="noList" v-show="dataArr.length == 0">
        <div>暂无数据</div>
      </li>
    </ul>
    <!-- 新增分类弹框 -->
    <div :class="{addPopup:isaddPopup,showadd:isShowadd}">
      <transition name="slide-fade">
        <div class="addContent" v-show="addShow" v-loading="loading">
            <div class="popupTitle">
              <div>{{addOrUpdateTitle}}</div>
            </div>
            <div class="popupContent">
              <div>分类名称：</div>
              <div><input type="text" placeholder="请输入分类名称" v-model="typeVal" :class="{blueBorder:isBlueTypeVal,grayBorder:isGrayTypeVal}"></div>
            </div>
            <div class="tips" :class="{blueTest:isBlueTypeVal,grayTest:isGrayTypeVal}">分类名称最多为8个汉字</div>
            <div class="button">
              <div v-show="addOrUpdateTitle == '编辑分类'" @click="butUcompileClick">保存</div>
              <div v-show="addOrUpdateTitle == '新增分类'" @click="saveClick">保存</div>
              <div @click="cancelClick">取消</div>
            </div>
        </div>
      </transition>
    </div>
    <!-- 删除弹框 --> 
    <v-infoDel :deleteBoxShow="deleteBoxShow" :delTostVal="delTostVal" @canfirm="delClick" @cancel="cancleClick"></v-infoDel>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import infoDel from "../../../cModel/infoDel";
export default {
  components: {
    "v-infoDel": infoDel
  },
  data() {
    return {
      isBlueTypeVal: false,
      isGrayTypeVal: true,
      titleVal: "企业文化",
      dataIdArr: [],
      typeVal: "",
      typeLists: [],
      dataArr: [],
      isShow: true,
      orgIdVal: "",
      catalogIdVal: "",
      parentIdVal: "",
      whetherShowVal: "",
      showClickTrueOrFalse: true,
      idVal: "",
      idTwoVal: "",
      isaddPopup: true,
      isShowadd: true,
      addShow: false,
      loading: false,
      deleteBoxShow: false,
      delTostVal: "",
      addOrUpdateTitle: "新增分类",
      saveClickTrueOrFalse: true,
      upClickTrueOrFalse: true,
      downClickTrueOrFalse: true,
      delClickTrueOrFalse: true,
      butUcompileClickTrueOrFalse: true
    };
  },
  filters: {
    // 字符串
    strFun: function(val) {
      if (val) {
        return val;
      } else {
        return "暂无";
      }
    },
    // 返回时间过滤
    timeFun: function(val) {
      if (val) {
        val = Number(val);
        var standardTime = new Date(val);
        var y, m, d, h, f;
        y = standardTime.getFullYear();
        m = standardTime.getMonth() + 1;
        m = m > 9 ? m : "0" + m;
        d = standardTime.getDate();
        d = d > 9 ? d : "0" + d;
        h = standardTime.getHours();
        h = h > 9 ? h : "0" + h;
        f = standardTime.getMinutes();
        f = f > 9 ? f : "0" + f;
        return y + "-" + m + "-" + d + " " + h + ":" + f;
      } else {
        return "暂无";
      }
    }
  },
  created: function() {
    var self = this;
    self.orgIdVal = sessionStorage.getItem("ORGID");
    self.listFun();
  },
  mounted() {},
  methods: {
    // 列表
    listFun() {
      var self = this;
      self
        .getWebInfoParent({
          orgId: self.orgIdVal
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.dataIdArr = data.data;
              self.dataArr = self.dataIdArr[2].lower;
              self.parentIdVal = self.dataIdArr[2].id;
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 搜索
    searchClick() {},
    // 添加文档
    addClick() {
      var self = this;
      self.isBlueTypeVal = false;
      self.isGrayTypeVal = true;
      self.isShowadd = false;
      self.addShow = true;
      self.typeVal = "";
    },
    // 正则
    validateFun() {
      var regOne = /^[\s]*$/; //输入不能为空
      var regTwo = new RegExp(/^[\u4e00-\u9fa5]{1,10}$/);
      if (regOne.test(this.typeVal) || !regTwo.test(this.typeVal)) {
        this.isBlueTypeVal = true;
        this.isGrayTypeVal = false;
      } else {
        this.isBlueTypeVal = false;
        this.isGrayTypeVal = true;
      }
      if (this.isBlueTypeVal == true) {
        return false;
      }
    },
    // 确定新增
    saveClick() {
      var self = this;
      if (self.validateFun() == false) {
        return false;
      } else {
        if (self.saveClickTrueOrFalse == true) {
          self.saveClickTrueOrFalse = false;
          self
            .getWebInfoCategoryAdd({
              parentId: self.parentIdVal,
              orgId: self.orgIdVal,
              name: self.typeVal
            })
            .then(data => {
              self.saveClickTrueOrFalse = true;
              if (data.statusCode == 200) {
                self.$message({
                  type: "success",
                  message: "添加成功"
                });
                self.isShowadd = true;
                self.addShow = false;
                self.listFun();
              } else if (data.statusCode == "200003") {
                self.$message({
                  type: "info",
                  message: data.statusMessage
                });
                this.$router.push({
                  path: "/login"
                });
              } else {
                self.$message({
                  type: "info",
                  message: data.statusMessage
                });
              }
            })
            .catch(msg => {
              self.saveClickTrueOrFalse = true;
              self.$message({
                type: "info",
                message: "服务器异常"
              });
            });
        }
      }
    },
    // 取消新增弹框
    cancelClick() {
      var self = this;
      self.isShowadd = true;
      self.addShow = false;
    },
    // 显示
    showClick(index) {
      var self = this;
      if (self.showClickTrueOrFalse == true) {
        self.showClickTrueOrFalse = false;
        self.catalogIdVal = self.dataArr[index].id;
        if (self.dataArr[index].whetherShow == 0) {
          self.whetherShowVal = 1;
        } else {
          self.whetherShowVal = 0;
        }
        var obj = {
          orgId: self.orgIdVal,
          parentId: self.parentIdVal,
          catalogId: self.catalogIdVal,
          whetherShow: self.whetherShowVal
        };
        // var object = JSON.stringify(obj)
        self
          .getWebInfoCategoryShowHide(obj)
          .then(data => {
            self.showClickTrueOrFalse = true;
            if (data.statusCode == 200) {
              self.$message({
                type: "success",
                message: "操作成功"
              });
              self.listFun();
            } else if (data.statusCode == "200003") {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              self.$message({
                type: "info",
                message: data.statusCode
              });
            }
          })
          .catch(msg => {
            self.showClickTrueOrFalse = true;
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    // 向上排序
    upClick(index) {
      var self = this;
      if (self.upClickTrueOrFalse == true) {
        self.upClickTrueOrFalse = false;
        self.idVal = self.dataArr[index].id;
        self.idTwoVal = self.dataArr[index - 1].id;
        self
          .getWebInfoCategorySort({
            orgId: self.orgIdVal,
            parentId: self.parentIdVal,
            catalogId1: self.idVal,
            catalogId2: self.idTwoVal
          })
          .then(data => {
            self.upClickTrueOrFalse = true;
            if (data.statusCode == 200) {
              self.$message({
                type: "success",
                message: "排序成功"
              });
              self.listFun();
            } else if (data.statusCode == "200003") {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
            }
          })
          .catch(msg => {
            self.upClickTrueOrFalse = true;
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    // 向下排序
    downClick(index) {
      var self = this;
      if (self.downClickTrueOrFalse == true) {
        self.downClickTrueOrFalse = false;
        self.idVal = self.dataArr[index].id;
        self.idTwoVal = self.dataArr[index + 1].id;
        self
          .getWebInfoCategorySort({
            orgId: self.orgIdVal,
            parentId: self.parentIdVal,
            catalogId1: self.idVal,
            catalogId2: self.idTwoVal
          })
          .then(data => {
            self.downClickTrueOrFalse = true;
            if (data.statusCode == 200) {
              self.$message({
                type: "success",
                message: "排序成功"
              });
              self.listFun();
            } else if (data.statusCode == "200003") {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
            }
          })
          .catch(msg => {
            self.downClickTrueOrFalse = true;
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    // 排序-最上面
    upMaxClick() {
      var self = this;
      self.$message({
        type: "info",
        message: "已排在最上面，不能再向上排序"
      });
    },
    // 排序-最下面
    downMaxClick() {
      var self = this;
      self.$message({
        type: "info",
        message: "已排在最下面，不能再向下排序"
      });
    },
    // 编辑
    ucompileClick(index) {
      var self = this;
      self.isBlueTypeVal = false;
      self.isGrayTypeVal = true;
      self.addOrUpdateTitle = "编辑分类";
      self.isShowadd = false;
      self.addShow = true;
      self.typeVal = self.dataArr[index].name;
      self.idVal = self.dataArr[index].id;
    },
    // 确定修改
    butUcompileClick() {
      var self = this;
      if (self.validateFun() == false) {
        return false;
      } else {
        if (self.butUcompileClickTrueOrFalse == true) {
          self
            .getWebInfoCategoryUpdate({
              orgId: self.orgIdVal,
              parentId: self.parentIdVal,
              catalogId: self.idVal,
              name: self.typeVal
            })
            .then(data => {
              if (data.statusCode == 200) {
                self.$message({
                  type: "success",
                  message: "修改成功"
                });
                self.isShowadd = true;
                self.addShow = false;
                self.listFun();
              } else if (data.statusCode == "200003") {
                self.$message({
                  type: "info",
                  message: data.statusMessage
                });
                this.$router.push({
                  path: "/login"
                });
              } else {
                self.$message({
                  type: "info",
                  message: data.statusMessage
                });
              }
            })
            .catch(msg => {
              self.$message({
                type: "info",
                message: "服务器异常"
              });
            });
        }
      }
    },
    // 删除
    deleteClick(index) {
      var self = this;
      self.deleteBoxShow = true;
      self.idVal = self.dataArr[index].id;
      self.delTostVal = "确定要删除该类目吗？";
    },
    // 确定删除
    delClick() {
      var self = this;
      if (self.delClickTrueOrFalse == true) {
        self.delClickTrueOrFalse = false;
        self
          .getWebInfoCategoryDelete({
            orgId: self.orgIdVal,
            parentId: self.parentIdVal,
            catalogId: self.idVal
          })
          .then(data => {
            self.delClickTrueOrFalse = true;
            if (data.statusCode == 200) {
              self.$message({
                type: "success",
                message: "删除成功"
              });
              self.deleteBoxShow = false;
              self.listFun();
            } else if (data.statusCode == "200003") {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
            }
          })
          .catch(msg => {
            self.delClickTrueOrFalse = true;
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    // 取消删除
    cancleClick() {
      var self = this;
      self.deleteBoxShow = false;
    },
    ...mapActions([
      "getWebInfoCategoryUpdate",
      "getWebInfoCategoryDelete",
      "getWebInfoCategoryAdd",
      "getWebInfoParent",
      "getWebInfoCategoryShowHide",
      "getWebInfoCategorySort"
    ])
  },
  watch: {}
};
</script>
<style scoped>
.addInformation {
  overflow: hidden;
  width: 100%;
  background-color: #fff;
  min-height: 500px;
  padding-bottom: 20px;
}

.opNoticeTop {
  width: 100%;
  margin-top: 18px;
  margin-left: 44px;
  margin-bottom: 23px;
}

.opNoticeTop .title input {
  width: 170px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  padding-left: 12px;
  color: #c1c1c1;
  margin-right: 20px;
}

.opNoticeTop .title select {
  width: 100px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  padding-left: 12px;
  color: #c1c1c1;
}

.opNoticeTop .title {
  display: flex;
  justify-content: space-between;
}

.opNoticeTop .addClass {
  margin-right: 90px;
  height: 32px;
  line-height: 32px;
  border-radius: 3px;
  width: 80px;
  text-align: center;
  cursor: pointer;
  background: #38adff;
  color: #fff;
  cursor: pointer;
}

.title .searchBox > div:nth-child(3) {
  width: 70px;
  height: 32px;
  border: 1px solid #d1d1d1;
  line-height: 32px;
  text-align: center;
  border-radius: 3px;
}

.title .searchBox > div:nth-child(1) {
  margin-right: 20px;
}

.title .searchBox {
  display: flex;
  align-items: center;
}

.opNoticeMain .firstLi {
  display: flex;
  align-items: center;
  width: 100%;
  border-top: 1px solid #d1d1d1;
  border-left: 1px solid #d1d1d1;
}

.opNoticeMain .firstLi > div {
  width: 16%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-right: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
  font-size: 16px;
  background: #f1f1f1;
}
.opNoticeMain .firstLi > div:nth-child(6) {
  width: 20%;
}

.dataLi {
  display: flex;
  border-left: 1px solid #d1d1d1;
  width: 100%;
}

.dataLi > div {
  width: 16%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-right: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dataLi > div:nth-child(6) {
  width: 20%;
}

.dataLi > div:nth-child(5) {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.dataLi .operate img {
  width: 24px;
  height: 24px;
}

.dataLi .operate {
  display: flex;
  width: 10%;
  align-items: center;
  justify-content: space-around;
}

.opNoticeMain {
  margin-left: 44px;
  width: calc(100% - 88px);
  min-height: 400px;
}

/* 新增分类弹框 */

.addPopup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.addContent {
  width: 450px;
  height: 250px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0px 10px 10px #eaeaea;
  border-radius: 4px;
  z-index: 100000;
}

.showadd {
  display: none;
}

.popupTitle {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #d1d1d1;
}

.popupTitle > div {
  font-size: 15px;
  margin-left: 25px;
}

.popupContent {
  display: flex;
  margin-top: 20px;
}

.popupContent > div {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  margin-top: 15px;
}

.popupContent > div:nth-child(1) {
  margin-left: 50px;
  margin-right: 10px;
}

.popupContent input {
  width: 180px;
  height: 32px;
  border-radius: 4px;
  padding-left: 12px;
}

.tips {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 130px;
}

.button {
  display: flex;
  justify-content: center;
  width: 80%;
  margin-top: 20px;
}

.button > div {
  width: 65px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}

.button > div:nth-child(1) {
  background: #38adff;
  margin-left: 100px;
}

.button > div:nth-child(2) {
  background: #38adff;
  margin-left: 50px;
}

.button > div:nth-child(3) {
  background: #d1d1d1;
  margin-left: 50px;
}

/* 删除弹框 */
.delPopup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  cursor: pointer;
}

.noList {
  width: 100%;
  text-align: center;
  height: 400px;
  line-height: 400px;
  font-size: 25px;
  color: #c1c1c1;
  /* background: #f1f1f1; */
}

.blueBorder {
  border: 1px solid #38adff;
}

.grayBorder {
  border: 1px solid #d1d1d1;
}

.blueTest {
  color: #38adff;
}

.grayTest {
  color: #c1c1c1;
}
</style>